<template>
  <div class="container">
    <div class="message-input-container" style="border-top: none">
      <div class="middle-box">
        <span class="title"> 提单列表 </span>
      </div>
      <docDetailBillTable></docDetailBillTable>
    </div>
    <el-form
      label-width="80px"
      :rules="rules"
      :model="data"
      ref="baseDataForm"
      :show-message="false"
    >
      <div class="message-input-container">
        <div class="middle-box">
          <span class="title" style="border-left: none"> 基本信息 </span>
        </div>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="提单类型">
              <el-input v-model="data.blNo" placeholder="请输入"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提单号">
              <el-input v-model="data.blNo" placeholder="请输入"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="船名航次">
              <div class="responsiveLayout">
                <selectDown
                  v-model:modelData="data.vessel"
                  placeholder="请输入后搜索"
                  urlType="CsShip"
                  style="width: 70%"
                  :option="initOption.cmOption"
                  :remoteShowSuffix="false"
                >
                </selectDown>
                <selectDown
                  v-model:modelData="data.voyage"
                  placeholder="请输入后搜索"
                  urlType="CsVoyage"
                  style="width: 30%; margin-left: 8px"
                  :remoteShowSuffix="false"
                >
                </selectDown>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开航日期">
              <el-date-picker
                v-model="data.atd"
                type="date"
                placeholder="请选择"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="委托单位" prop="requester">
              <selectDown
                v-model:modelData="data.requester"
                placeholder="请输入后搜索"
                urlType="buenterprise"
                urlQueryData="客户"
                :option="initOption.wtdwOption"
                @getOption="getCustData"
                fit-input-width
                :labelSpaceBetween="true"
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订舱单位">
              <selectDown
                v-model:modelData="data.bookingParty"
                placeholder="请输入后搜索 "
                urlType="buenterprise"
                urlQueryData="订舱单位"
                :option="initOption.dcdwOption"
                :labelSpaceBetween="true"
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订舱代理">
              <selectDown
                v-model:modelData="data.bookingAgent"
                placeholder="请输入后搜索"
                urlType="CsShipCompany"
                :labelSpaceBetween="true"
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="船代">
              <selectDown
                v-model:modelData="data.shipingAgent"
                placeholder="请输入后搜索"
                urlType="CsShipCompany"
                :labelSpaceBetween="true"
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="船公司">
              <selectDown
                v-model:modelData="data.shipowner"
                placeholder="请输入后搜索"
                urlType="CsShipCompany"
                :labelSpaceBetween="true"
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="签单方式" prop="billType">
              <docSelects
                v-model:modelData="data.billType"
                placeholder="请选择"
                :option="$store.state.businessBaseData.dictData['sys_bl_type']"
              >
              </docSelects>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="签单份数" prop="originalBillNumber">
              <div class="responsiveLayout">
                <el-input
                  v-model="data.originalBillNumber"
                  style="max-width: 48%"
                  placeholder=""
                >
                  <template #append>正本份数</template>
                </el-input>
                <el-input
                  v-model="data.originalBillCopyNumber"
                  style="max-width: 48%; margin-left: 4%"
                  placeholder=""
                >
                  <template #append>副本份数</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="签单地点">
              <el-input v-model="data.signingLocation" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="合约号">
              <el-input
                v-model="data.contractNumber"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运输条款">
              <div class="responsiveLayout">
                <docSelects
                  v-model:modelData="data.freightTerms1"
                  style="width: 49%; margin-right: 1%"
                  placeholder="请选择"
                  :option="$store.state.businessBaseData.baseData['transterm']"
                  fit-input-width
                >
                </docSelects>
                <span style="color: #00000066; font-size: 12px">-</span>
                <docSelects
                  v-model:modelData="data.freightTerms2"
                  style="width: 49%; margin-left: 1%"
                  placeholder="请选择"
                  :option="$store.state.businessBaseData.baseData['transterm']"
                  fit-input-width
                >
                </docSelects>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="付款方式">
              <docSelects
                v-model:modelData="data.payment"
                placeholder="请选择"
                :option="
                  $store.state.businessBaseData.baseData['CsPaymentMode']
                "
                fit-input-width
              >
              </docSelects>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="付款地点">
              <el-input
                v-model="data.payPlace"
                placeholder="请输入"
                @keydown="parseInput"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="装货港" prop="loadingPort">
              <selectDown
                v-model:modelData="data.loadingPort"
                placeholder="请输入后搜索"
                urlType="port"
                :option="initOption.zhgOption"
                @getOption="getPortDepartureName"
                @handleChange="portDepartChange"
                fit-input-width
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装货地点">
              <selectDown
                v-model:modelData="data.receiptPlace"
                placeholder="请输入后搜索"
                urlType="port"
                :option="initOption.zzgOption"
                fit-input-width
                @getOption="getPortTransportName"
                @handleChange="portTransportChange"
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="中转港">
              <selectDown
                v-model:modelData="data.transshipmentPort"
                placeholder="请输入后搜索"
                urlType="port"
                :option="initOption.zzgOption"
                fit-input-width
                @getOption="getPortTransportName"
                @handleChange="portTransportChange"
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提单格式">
              <selectDown
                v-model:modelData="data.shipowner"
                placeholder="请输入后搜索"
                urlType="CsShipCompany"
                :labelSpaceBetween="true"
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="6">
                <el-form-item label="结算方式">
                    <div class="responsiveLayout">
                    <docSelects
                        style="width: 49%; margin-right: 3%"
                        v-model:modelData="data.settleType"
                        placeholder="请输入后搜索"
                        :option="
                        $store.state.businessBaseData.dictData['sys_settle_type']
                        "
                        fit-input-width
                    >
                    </docSelects>
                    <el-input
                        v-model="input2"
                        style="width: 48%"
                        placeholder="帐期"
                    >
                        <template #append>天</template>
                    </el-input>
                    </div>
                </el-form-item>
                </el-col> -->
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="卸货港" prop="dischargePort">
              <selectDown
                v-model:modelData="data.dischargePort"
                placeholder="请输入后搜索"
                urlType="port"
                :option="initOption.xhgOption"
                @getOption="getPortDischargeName"
                @handleChange="portDischargeChange"
                fit-input-width
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="卸货地点">
              <selectDown
                v-model:modelData="data.unloadingPlace"
                placeholder="请输入后搜索"
                urlType="port"
                :option="initOption.zzgOption"
                fit-input-width
                @getOption="getPortTransportName"
                @handleChange="portTransportChange"
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="目的地">
              <selectDown
                v-model:modelData="data.finalDestination"
                placeholder="请输入后搜索"
                urlType="port"
                :option="initOption.zzgOption"
                fit-input-width
                @getOption="getPortTransportName"
                @handleChange="portTransportChange"
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="截单时间">
              <el-date-picker
                v-model="data.deadlineOrderTime"
                type="datetime"
                placeholder="请选择"
                format="YYYY-MM-DD HH:mm"
                time-format="HH:mm"
                value-format="YYYY-MM-DD HH:mm"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-row>
              <el-col>
                <el-form-item label="发货人" prop="shipper">
                  <template #label>
                    <div class="flex-column">
                      <div class="first-title">发货人</div>
                      <span class="choice" @click.stop="openBLDialog"
                        >选择</span
                      >
                    </div>
                  </template>
                  <el-input
                    v-model="data.shipper"
                    type="textarea"
                    :rows="6"
                    placeholder="请填写发货人信息"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col>
                <el-form-item label="收货人" prop="consignee">
                  <template #label>
                    <div class="flex-column">
                      <div class="first-title">收货人</div>
                      <span class="choice" @click.stop="openBLDialog"
                        >选择</span
                      >
                    </div>
                  </template>
                  <el-input
                    v-model="data.consignee"
                    type="textarea"
                    :rows="6"
                    placeholder="请填写收货人信息"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col>
                <el-form-item label="通知人" prop="notifyPerson">
                  <template #label>
                    <div class="flex-column">
                      <div
                        @click.stop="changeValue(1)"
                        :class="isFirst ? 'first-title' : 'sencond-title'"
                      >
                        通知人
                      </div>
                      <span
                        :class="isFirst ? 'sencond-title' : 'first-title'"
                        @click.stop="changeValue(2)"
                        >第二通知人</span
                      >
                      <span class="choice" @click.stop="openBLDialog"
                        >选择</span
                      >
                    </div>
                  </template>
                  <el-input
                    v-model="data.notifyPerson"
                    type="textarea"
                    :rows="6"
                    placeholder="请填写通知人信息"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="no-bottom">
          <el-col :span="8">
            <el-row>
              <el-col>
                <el-form-item label="唛头信息" prop="marks">
                  <el-input
                    v-model="data.marks"
                    type="textarea"
                    :rows="6"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="input-number-style">
                <el-form-item label="件数" prop="pkgs">
                  <div class="responsiveLayout">
                    <!-- <el-input
                        style="width: 36%"
                        v-model="data.grossWeight"
                        placeholder="请输入件数"
  
                      ></el-input> -->
                    <el-input-number
                      style="width: 36%"
                      v-model="data.pkgs"
                      placeholder="请输入件数"
                      :precision="0"
                      :controls="false"
                    />
                    <!-- <docSelects
                        v-model:modelData="data.grossWeight"
                        placeholder="请选择"
                        style="width: 62%; margin-left: 2%"
                        :option="
                          $store.state.businessBaseData.dictData[
                            'sys_businessStatus'
                          ]
                        "
                        fit-input-width
                      >
                      </docSelects> -->
                    <selectDown
                      v-model:modelData="data.packageType"
                      placeholder="请选择"
                      style="width: 62%; margin-left: 2%"
                      urlType="CsPackageType"
                      :fit-input-width="false"
                      :autoWidth="true"
                    >
                    </selectDown>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="HS CODE" prop="hscode">
                  <el-input
                    v-model="data.hscode"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col>
                <el-form-item label="英文品名" prop="cargoName">
                  <el-input
                    v-model="data.cargoName"
                    type="textarea"
                    :rows="6"
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="毛重" prop="grossWeight">
                  <el-input v-model="data.grossWeight" placeholder="请输入">
                    <template #append>KGS</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col>
                <el-form-item label="中文品名">
                  <el-input
                    v-model="data.cargoNameCn"
                    type="textarea"
                    :rows="6"
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="体积" prop="measurement">
                  <el-input v-model="data.measurement" placeholder="请输入">
                    <template #append>CBM</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div style="padding-left: 12px; padding-right: 12px">
      <div class="middle-box">
        <span class="title" style="border-left: none"> 集装箱装载信息 </span>
      </div>
      <docDetailBillBoxCargoTable></docDetailBillBoxCargoTable>
    </div>
    <docDetailFillShipper ref="BLDialog" @choose="getBLTitle">
    </docDetailFillShipper>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import selectDown from './selectDownNew.vue'
import docSelects from './../components/docSelects.vue'
import docDetailBillBoxCargoTable from './docDetailBillBoxCargoTable.vue'
import docDetailFillShipper from './../components/docDetailFillShipper.vue'
import docDetailBillTable from './docDetailBillTable.vue'
import docDetailBaseBLHistoryDialog from './../components/docDetailBaseBLHistoryDialog.vue'
import {
  ArrowDown,
  CircleClose,
  CircleCloseFilled
} from '@element-plus/icons-vue'
export default defineComponent({
  components: {
    selectDown,
    docSelects,
    docDetailBillTable,
    docDetailFillShipper,
    ArrowDown,
    docDetailBillBoxCargoTable,
    CircleClose,
    CircleCloseFilled,
    docDetailBaseBLHistoryDialog
  },
  props: {
    //详细数据
    detailData: {
      type: Object,
      default: () => {}
    },
    //初始化option
    initOption: {
      type: Object,
      default: () => {}
    },
    checkDisabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:detailData'],
  computed: {
    data: {
      get() {
        return this.detailData
      },
      set(value) {
        this.$emit('update:detailData', value)
      }
    },

    // 货物种类复选框数组
    cargoTypeList: {
      get() {
        return this.detailData.cargoType != 0 ? [this.detailData.cargoType] : []
      }
    }
  },
  data() {
    return {
      formData: {},
      inkey: 0,
      radio1: '1',
      useXiangData: [
        {
          id: 1,
          xiangxin: '',
          xiangliang: 1,
          useXiangXuQiu: 'SOC',
          hasDeleteIcon: false //是否有删除图标
        }
      ],
      num: 1,
      isFirst: true,
      rules: {
        requester: [{ required: true, message: '请输入', trigger: 'change' }],
        consignmentNo: [
          { required: true, message: '请输入', trigger: 'change' }
        ],
        billType: [{ required: true, message: '请输入', trigger: 'change' }],
        originalBillNumber: [
          { required: true, message: '请输入', trigger: 'change' }
        ],
        loadingPort: [{ required: true, message: '请输入', trigger: 'change' }],
        dischargePort: [
          { required: true, message: '请输入', trigger: 'change' }
        ],
        grodischargePortssWeight: [
          { required: true, message: '请输入', trigger: 'change' }
        ],
        marks: [{ required: true, message: '请输入', trigger: 'blur' }],
        pkgs: [{ required: true, message: '请输入', trigger: 'blur' }],
        hscode: [{ required: true, message: '请输入', trigger: 'blur' }],
        cargoName: [{ required: true, message: '请输入', trigger: 'blur' }],
        grossWeight: [{ required: true, message: '请输入', trigger: 'blur' }],
        measurement: [{ required: true, message: '请输入', trigger: 'blur' }],
        fcL_LCL: [{ required: true, message: '请输入', trigger: 'blur' }],
        shipper: [{ required: true, message: '请输入', trigger: 'blur' }],
        consignee: [{ required: true, message: '请输入', trigger: 'blur' }],
        notifyPerson: [{ required: true, message: '请输入', trigger: 'blur' }],
        seviceType: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!this.data.seviceType.length) {
                callback(new Error('请勾选复选框'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }
        ],
        portDepartureId: [
          { required: true, message: '请输入', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    validatorBox(rule, value, callback) {
      let allFieldsFilled = true
      for (const iterator of this.useXiangData) {
        if (!iterator.xiangxin || iterator.xiangliang) {
          allFieldsFilled = false
          break
        }
      }
      if (!allFieldsFilled) {
        callback(new Error('请填写箱型和箱量'))
      } else {
        callback()
      }
    },
    // 展开收齐
    expanIcon() {
      this.expand = !this.expand
    },
    moveTableData(row) {
      let newArr = this.data.useXiangData.filter((item) => item.id != row.id)
      this.data.useXiangData = newArr
    },
    // 切换通知人
    changeValue(val) {
      if (val == 1) {
        this.isFirst = true
      } else {
        this.isFirst = false
      }
    },
    cargoTypeChange(val) {
      if (val.length != 0) {
        this.detailData.cargoType = val[val.length - 1]
      } else {
        this.detailData.cargoType = 0
      }
    },
    openBLDialog() {
      if (this.data.custId) {
        this.$refs.BLDialog.open(this.data.custId)
      } else {
        this.$message.error('请选择委托单位')
      }
    },
    getVesselData(data) {
      this.data.voyage = data.voyage
    },
    /**
     * 选择收发货人选取
     * @param {object} bldata - 组件选取数据
     */
    getBLTitle(bldata) {
      this.data.shipperMemo = bldata.shiperTitle
      this.data.consigneeMemo = bldata.receiverTitle
      this.data.notifyMemo = bldata.notifyTitle
    },
    openBLHistoryDialog(strKey) {
      if (this.data.custId) {
        switch (strKey) {
          case '发货人':
            this.inkey = 1
            break
          case '收货人':
            this.inkey = 2
            break
          case '通知人':
            this.inkey = 3
            break
          case '第二通知人':
            this.inkey = 5
            break
          default:
            break
        }

        this.$refs.BLHistoryDialog.open(this.data.custId)
      } else {
        this.$message.error('请选择委托单位')
      }
    },
    /**
     * 单独选取
     * @param {object} blHistorydata - 组件选取数据
     */
    getBLHistoryTitle(blHistorydata) {
      if (this.inkey == 1) {
        this.data.shipperMemo = blHistorydata
      } else if (this.inkey == 2) {
        this.data.consigneeMemo = blHistorydata
      } else if (this.inkey == 3) {
        this.data.notifyMemo = blHistorydata
      } else if (this.inkey == 5) {
        this.data.secondNotifyMemo = blHistorydata
      }
    },
    // 选择收货人
    openBLDialog() {
      if (this.data.custId) {
        this.$refs.BLDialog.open(this.data.custId)
      } else {
        this.$message.error('请选择委托单位')
      }
    },
    /**
     * 添加用箱信息按钮点击事件
     */
    async addUseBoxInfo() {
      console.log(this.data.useXiangData.length - 1, 'cccccc')
      let outFlag = true
      for (let i = 0; i <= this.data.useXiangData.length - 1; i++) {
        await this.$refs.baseDataForm.validateField(
          ['useXiangData.' + i + '.xiangxin'],
          (value) => {
            if (!value) {
              outFlag = false
            }
          }
        )
      }
      if (outFlag) {
        this.data.useXiangData.push({
          id: this.data.useXiangData.length + 1,
          xiangxin: '',
          xiangliang: 1,
          useXiangXuQiu: 'SOC',
          hasDeleteIcon: true
        })
      } else {
        this.$message.error('请填写箱型和箱量')
      }
    },
    /**
     * 删除用箱信息按钮点击事件
     */
    deleteByOne(row) {
      this.useXiangData = this.useXiangData.filter((item) => item.id != row.id)
    },
    /**
     * 将option.label传值给custName
     * @param {object} data - 委托单位下拉选择的option
     */
    getCustData(data) {
      this.data.custName = data.label
    },
    /**
     * 将option.label传值给salesName
     * @param {object} data - 业务员下拉选择的option
     */
    getSalesData(data) {
      this.data.salesName = data.label
    },
    /**
     * 将option.label传值给operaterName
     * @param {object} data - 操作员下拉选择的option
     */
    getOperaterData(data) {
      this.data.operaterName = data.label
    },
    /**
     * 将option.label传值给bookingName
     * @param {object} data - 订舱员下拉选择的option
     */
    getBookingData(data) {
      this.data.bookingName = data.label
    },
    /**
     * 将option.label传值给serviceName
     * @param {object} data - 客服下拉选择的option
     */
    getServiceData(data) {
      this.data.serviceName = data.label
    },
    /**
     * 将option.label传值给PortDepartureName
     * @param {object} data - 装货港选择的option
     */
    getPortDepartureName(data) {
      this.data.portDepartureName = data.label
      this.initOption.zhgOption = [
        {
          id: data.id,
          value: data.value,
          label: data.selectLabel
        }
      ]
    },
    // 清空选中数据同时清空港口option内的数据
    portDepartChange(val) {
      if (!val) {
        this.initOption.zhgOption = []
      }
    },
    /**
     * 将option.label传值给portDischargeName
     * @param {object} data - 卸货港选择的option
     */
    getPortDischargeName(data) {
      this.data.portDischargeName = data.label
      this.initOption.xhgOption = [
        {
          id: data.id,
          value: data.value,
          label: data.selectLabel
        }
      ]
    },
    portDischargeChange(val) {
      if (!val) {
        this.initOption.xhgOption = []
      }
    },

    boxContainerChange(val) {
      if (!val) {
        this.initOption.BoxOption = []
      }
    },
    /**
     * 将option.label传值给portDestinationName
     * @param {object} data - 目的港选择的option
     */
    getPortDestinationName(data) {
      this.data.portDestinationName = data.label
      this.initOption.mdgOption = [
        {
          id: data.id,
          value: data.value,
          label: data.selectLabel
        }
      ]
    },
    portDestinationChange(val) {
      if (!val) {
        this.initOption.mdgOption = []
      }
    },
    /**
     * 将option.label传值给portTransportName
     * @param {object} data - 中转港选择的option
     */
    getPortTransportName(data) {
      this.data.portTransportName = data.label
      this.initOption.zzgOption = [
        {
          id: data.id,
          value: data.value,
          label: data.selectLabel
        }
      ]
    },
    portTransportChange(val) {
      if (!val) {
        this.initOption.zzgOption = []
      }
    },
    /**
     * 将option.label传值给tradelaneName
     * @param {object} data - 航线选择的option
     */
    getTradelaneName(data) {
      this.data.tradelaneName = data.label
    },
    /**
     *  品名描述转大写
     * @param {string} data
     */
    upperCargoDescription(data) {
      this.data.cargoDescription = data.toUpperCase()
    },
    /**
     *  品名描述转大写
     * @param {string} data
     */ upperCargoDescription(data) {
      this.data.cargoDescription = data.toUpperCase()
    },
    /**
     *  唛头转大写
     * @param {string} data
     */
    uppermarks(data) {
      this.data.marks = data.toUpperCase()
    },
    /**
     * 数字输入框禁止输入e 和禁止.（小数）
     * @param {string} e
     */
    parseInput(e) {
      let key = e.key
      if (key === 'e' || key === '.') {
        e.returnValue = false
        return false
      }
      return true
    },
    foldService() {
      //折叠业务信息
      this.serviceInfoIsShow = !this.serviceInfoIsShow
    },

    foldAllocation() {
      this.allocationInfoIsShow = !this.allocationInfoIsShow
    },

    foldUseBox() {
      this.useBoxInfoIsShow = !this.useBoxInfoIsShow
    },

    foldGoods() {
      this.goodsInfoIsShow = !this.goodsInfoIsShow
    },

    foldBooker() {
      this.bookerInfoIsShow = !this.bookerInfoIsShow
    },

    foldOperate() {
      this.operateInfoIsShow = !this.operateInfoIsShow
    }
  },
  mounted() {},
  created() {}
})
</script>

<style lang="scss" scoped>
.el-textarea__inner {
  line-height: 1.2 !important;
}
@media only screen and (max-width: 1800px) {
  .hwzl {
    flex: 0 0 30%;
    max-width: auto;
  }

  .kf {
    flex: 0 0 20%;
    max-width: auto;
  }
}

@media only screen and (max-width: 1450px) {
  .hwzl {
    flex: 0 0 40%;
    max-width: auto;
  }

  .kf {
    flex: 0 0 10%;
    max-width: auto;
  }
}

.container {
  :deep(.el-form-item) {
    margin: 0;
  }

  :deep(.el-row) {
    margin-bottom: 8px;
  }

  .middle-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    .title {
      border-left: 2px solid #5d9df5;
      // margin-left: 12px;
      padding-left: 4px;
      color: #000000;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 14px;
      letter-spacing: 0px;
    }
    .tempalte-text {
      color: #5a9cf8;
      font-family: PingFang SC;
      font-weight: normal;
      font-size: 12px;
      letter-spacing: 0px;
      margin-left: 12px;
      cursor: pointer;
    }

    .fold,
    .expand {
      padding-right: 18px;
      color: #5e9ef5;
      cursor: pointer;
    }

    .btn {
      cursor: pointer;
      color: #0063b9;
      margin: 0 16px 0 8px;
    }

    :deep(.el-checkbox) {
      margin-left: 16px;
    }
  }

  :deep(.el-table .el-table__header-wrapper th) {
    color: #000000d8;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0px;
  }

  .message-input-container {
    width: 100%;
    padding: 8px 12px 0px;
    border-top: 8px solid #f8f8f8;

    .expand-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 8px;
      span {
        color: #5a9cf8;
        font-family: PingFang SC;
        font-weight: normal;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0px;
        margin-right: 4px;
      }
    }
    .rotate {
      transform: rotate(-180deg);
    }
    .collapse {
      transition: all 0.5s ease;
    }
    .no-bottom {
      margin-bottom: 0px;
    }
  }

  :deep(.el-input-group__append, .el-input-group__prepend) {
    padding: 0 8.5px;
    background-color: #f8f8f8;
  }

  .no-border-top {
    border-top: none;
  }

  .middle-box:not(.special) {
    justify-content: space-between;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: right;

    .first-title {
      color: #000000d8;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0px;
      cursor: pointer;
    }

    .sencond-title {
      color: #000000;
      opacity: 0.4;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0px;
      cursor: pointer;
    }
  }

  .responsiveLayout {
    width: 100%;
    display: flex;
  }

  ::v-deep .el-input-number__decrease {
    background-color: #fff;
    border-right: none;
  }
  ::v-deep .el-input-number__increase {
    background-color: #fff;
    border-left: none;
  }

  .choice {
    color: #5a9cf8;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    cursor: pointer;
  }

  .flex-item-label {
    color: rgba(0, 0, 0, 0.8470588235);
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0px;
    line-height: 24px;
    width: 80px;
    text-align: right;
    margin-right: 8px;
    flex: 0 0 80px;
  }

  .flex-container {
    display: flex;
    justify-content: flex-start;
  }

  .box-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .box-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .delete-icon {
    position: absolute;
    top: -5px;
    right: -4px;
    z-index: 100;
    color: #c5c5c5;
    cursor: pointer;
  }

  .box-item-fill {
    margin-right: 8px;
    display: flex;
    align-items: center;
    position: relative;
  }

  .addUseBoxInfo {
    color: #6ba5f6;
    cursor: pointer;
    width: 50px;
    height: 24px;
    display: flex;
    align-items: center;
    margin: 12px 0 10px 0px;
    .addFont {
      margin-left: 3px;
      line-height: 21px;
    }
  }

  .add-use-box-info-new {
    color: #6ba5f6;
    cursor: pointer;
    width: 50px;
    height: 24px;
    display: flex;
    align-items: center;
    margin-left: 4px;
    flex: 0 0 50px;
    .addFont {
      margin-left: 3px;
      line-height: 24px;
    }
  }
}
.input-number-style {
  :deep(.el-input-number.is-without-controls .el-input__wrapper) {
    padding: 2px 8px;
  }
  :deep(.el-input-number .el-input__inner) {
    text-align: left;
  }
}

.table-header::before {
  content: '*';
  color: #f56c6c;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0px;
  position: absolute;
  left: 11px;
}

.table-header-other::before {
  content: '*';
  color: #f56c6c;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0px;
  position: absolute;
  left: 22px;
}

:deep(.el-form-item--small .el-form-item__label) {
  color: #000000d8;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0px;
}

:deep(.el-form-item.is-error .el-checkbox__input .el-checkbox__inner) {
  border-color: #f56c6c;
}
// :deep(.el-checkbox.el-checkbox--small) {
//   margin-right: 12px;
// }
</style>
